<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" th:href="@{/css/mypetstore.css}" type="text/css" media="screen"/>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/search.js"></script>
</head>
<body>
<header th:fragment="header">
    <div id="Header">
        <div id="Logo">
            <div id="LogoContent">
                <a href="/catalog/main"><img src="../images/logo-topbar.gif"></a>
            </div>
        </div>

        <div id="Menu">
            <div id="MenuContent">
                <div class="topForm">
                    <a href="/cart/main"><img align="middle" name="img_cart" th:src="@{/images/cart.gif}"/></a>
                    <div>
                        <img align="middle" th:src="@{/images/separator.gif}"/>
                    </div>
                    <div th:if="${session.username == null}">
                        <a href="/account/loginView">Sign In</a>
                    </div>
                    <div th:if="${session.username}">
                        <a href="/account/logout">Sign Out</a>
                        <img align="middle" th:src="@{/images/separator.gif}"/>
                        <a href="/account/userInfoView"> My Account </a>
                    </div>
                    <div>
                        <img align="middle" th:src="@{/images/separator.gif}"/>
                    </div>
                    <a th:href="@{help.html}">?</a>
                </div>
            </div>
        </div>
        <div id="Search">
            <div id="SearchContent">
                <form action="/catalog/search" method="post" onsubmit="validate()">
                    <input type="text" name="keyword" size="14" id="keyword" onkeyup="search()">
                    <input type="submit" value="Search">
                    <div id="productAutoComplete">
                        <ul id="productAutoList">
                        </ul>
                    </div>
                </form>
            </div>
        </div>

        <div id="QuickLinks">
            <a href="/catalog/category?categoryId=FISH"><img src="../images/sm_fish.gif"></a>
            <img src="../images/separator.gif"/>
            <a href="/catalog/category?categoryId=DOGS"><img src="../images/sm_dogs.gif"></a>
            <img src="../images/separator.gif"/>
            <a href="/catalog/category?categoryId=REPTILES"><img src="../images/sm_reptiles.gif"></a>
            <img src="../images/separator.gif"/>
            <a href="/catalog/category?categoryId=CATS"><img src="../images/sm_cats.gif"></a>
            <img src="../images/separator.gif"/>
            <a href="/catalog/category?categoryId=BIRDS"><img src="../images/sm_birds.gif"></a>
        </div>
    </div>
</header>
</body>
</html>